<!--
 * @Author: 谢子健 1075010289@qq.com
 * @Date: 2024-04-22 06:27:31
 * @LastEditors: 谢子健 1075010289@qq.com
 * @LastEditTime: 2024-04-30 17:44:46
 * @FilePath: \llm_chat_front_end\src\views\pdf\components\pdf_list\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup lang="ts">
import { computed, defineEmits, defineProps, ref, watch } from 'vue'
import { NDataTable, NP } from 'naive-ui'
import type { DataTableColumns, DataTableRowKey } from 'naive-ui'
import type { IPdfMeta, PDFRowData } from '@/views/pdf/DataModel.ts'

// 定义接收的 props
const props = defineProps<{
  isMultiSelectMode: boolean
  pdfMetaList: IPdfMeta[] | null
  savedSearchQuery: string
  savedSearchTags: string[]
}>()
const emit = defineEmits(['handleSelectionChange'])

// 定义动态搜索关键词的 ref
const searchKeyword = ref(props.savedSearchQuery)

// 将 pdfMetaList 转换为 PDFList

const pdfColumns = computed<DataTableColumns<PDFRowData>>(() => {
  return [
    {
      type: 'selection',
      multiple: props.isMultiSelectMode,
    },
    {
      title: 'ID',
      key: 'id',
    },
    {
      title: '标题',
      key: 'name',
    },
    {
      title: '标签', // 新增标签列
      key: 'tags',
      render: (row: PDFRowData) => {
        // 在此处返回标签的渲染内容
        return row.tags.join(', ') // 将标签数组转换为字符串显示
      },
    },
  ]
})

const PDFListOrigin = computed(() => {
  return props.pdfMetaList?.map(pdfMeta => ({
    id: pdfMeta.pdfUuid,
    name: pdfMeta.title,
    tags: pdfMeta.tags?.slice(0, 2) ?? [], // 包含标签信息
  })) || []
})

const PDFList = ref<PDFRowData[]>(PDFListOrigin.value)

// 选中的行
const selectedRowKeys = ref<DataTableRowKey[]>([])

// 处理选中的行
const handleSelectionChange = (keys: DataTableRowKey[]) => {
  selectedRowKeys.value = keys
  if (keys.length === 0) {
    emit('handleSelectionChange', [-1])
    return
  }
  const selectedIdsFromChild = keys.map((key) => {
    return key as number
  })
  emit('handleSelectionChange', selectedIdsFromChild)
}

// 清空选中的行
const clearSelection = () => {
  // console.log('清空选中的行')

  handleSelectionChange([])
}

defineExpose({ clearSelection })

// 定义行的key
const rowKey = (row: PDFRowData) => row.id

// 定义翻页
const pagination = {
  pageSize: 10,
}

// 处理标签搜索逻辑
const handleSearchTags = (tags: string[]) => {
  if (!tags || tags.length === 0) {
    // 如果没有标签，直接显示全部PDF
    PDFList.value = PDFListOrigin.value
    // console.log('无标签，显示全部PDF:', PDFList.value)
    return
  }

  // 如果有标签，筛选出含有这些标签的PDF
  const filteredPDFList = props.pdfMetaList?.filter((pdfMeta) => {
    // 检查PDF的标签是否包含任何一个给定的标签
    return tags.some(tag => pdfMeta.tags?.includes(tag) ?? false)
  }) || []

  // 更新PDF列表
  PDFList.value = filteredPDFList.map(pdfMeta => ({
    id: pdfMeta.pdfUuid,
    name: pdfMeta.title,
    tags: pdfMeta.tags || [], // 包含标签信息，如果标签不存在，则使用空数组作为默认值
  }))
  // console.log('筛选标签后的PDF列表:', PDFList.value)
}

// console.log('筛选标签后的PDF列表:', PDFList.value)

// 监听 savedSearchTags 的变化，更新动态搜索标签
watch(() => props.savedSearchTags, (newTags) => {
  handleSearchTags(newTags) // 在变化时触发标签搜索逻辑
  // console.log('触发标签搜索逻辑，搜索的标签:', newTags)
})

const handleSearch = () => {
  // 触发 watch 监听，更新 PDF 列表
  // console.log('执行搜索逻辑:', searchKeyword.value)
}
// 监听 savedSearchQuery 的变化，更新动态搜索关键词
watch(() => props.pdfMetaList, (newPdfMetaList) => {
  if (newPdfMetaList) {
    handleSearchTags(props.savedSearchTags)
    handleSearch()
  }
}, { immediate: true })
watch(() => props.savedSearchQuery, (newValue) => {
  searchKeyword.value = newValue
  handleSearch() // 在变化时触发搜索逻辑
})

watch(searchKeyword, () => {
  // 执行搜索逻辑，更新 PDF 列表
  // 例如，根据标题进行模糊匹配搜索
  if (props.pdfMetaList) {
    const filteredPDFList = props.pdfMetaList.filter(pdfMeta => pdfMeta.title.includes(searchKeyword.value))
    // console.log('执行搜索逻辑，搜索关键词:', searchKeyword.value)
    // console.log('搜索结果:', filteredPDFList)
    PDFList.value = filteredPDFList.map(pdfMeta => ({
      id: pdfMeta.pdfUuid,
      name: pdfMeta.title,
      tags: pdfMeta.tags || [], // 包含标签信息，如果标签不存在，则使用空数组作为默认值
    }))
  }
})
</script>

<template>
  <div>
    <NP> 你选中了 {{ selectedRowKeys.length }} 篇PDF。 </NP>
    <NDataTable
      class="customTable" :columns="pdfColumns" :data="PDFList" :row-key="rowKey" :pagination="pagination"
      :checked-row-keys="selectedRowKeys"
      :bordered="true" striped @update:checked-row-keys="handleSelectionChange"
    />
  </div>
</template>

<style lang="less" scoped>
.customTable {
  :deep(.n-data-table__pagination) {
    justify-content: center
  }
}
</style>

<style lang="less" scoped>
.customTable {
  :deep(.n-data-table__pagination) {
    justify-content: center
  }
}
</style>
